<!--
 * @Description: 
 * @Author: Gaq
 * @Date: 2022-10-25 10:51:16
 * @LastEditTime: 2022-12-01 19:26:06
 * @LastEditors: Gaq
-->
<script setup>
import bus from "vue3-eventbus";
import request from "@/utils/request";
import router from "@/router";
import { ElMessage } from "element-plus";

const city = ref("");
const sort = ref("");
const time = ref("");

const regionOption = [
  {
    label: "北京",
    value: "北京",
  },
  {
    label: "天津",
    value: "天津",
  },
  {
    label: "河北",
    value: "河北",
  },
  {
    label: "山西",
    value: "山西",
  },
  {
    label: "内蒙古自治区",
    value: "内蒙古自治区",
  },
  {
    label: "辽宁",
    value: "辽宁",
  },
  {
    label: "吉林",
    value: "吉林",
  },
  {
    label: "黑龙江",
    value: "黑龙江",
  },
  {
    label: "上海",
    value: "上海",
  },
  {
    label: "江苏",
    value: "江苏",
  },
  {
    label: "浙江",
    value: "浙江",
  },
  {
    label: "安徽",
    value: "安徽",
  },
  {
    label: "福建",
    value: "福建",
  },
  {
    label: "江西",
    value: "江西",
  },
  {
    label: "山东",
    value: "山东",
  },
  {
    label: "河南",
    value: "河南",
  },
  {
    label: "湖北",
    value: "湖北",
  },
  {
    label: "湖南",
    value: "湖南",
  },
  {
    label: "广东",
    value: "广东",
  },
  {
    label: "广西壮族自治区",
    value: "广西壮族自治区",
  },
  {
    label: "海南",
    value: "海南",
  },
  {
    label: "重庆",
    value: "重庆",
  },
  {
    label: "四川",
    value: "四川",
  },
  {
    label: "贵州",
    value: "贵州",
  },
  {
    label: "云南",
    value: "云南",
  },
  {
    label: "西藏自治区",
    value: "西藏自治区",
  },
  {
    label: "陕西",
    value: "陕西",
  },
  {
    label: "甘肃",
    value: "甘肃",
  },
  {
    label: "青海",
    value: "青海",
  },
  {
    label: "宁夏回族自治区",
    value: "宁夏回族自治区",
  },
  {
    label: "新疆维吾尔自治区",
    value: "新疆维吾尔自治区",
  },
  {
    label: "台湾",
    value: "台湾",
  },
  {
    label: "香港特别行政区",
    value: "香港特别行政区",
  },
  {
    label: "澳门特别行政区",
    value: "澳门特别行政区",
  },
];
const sortOption = [
  {
    value: "民间文学",
    label: "民间文学",
  },
  {
    value: "传统音乐",
    label: "传统音乐",
  },
  {
    value: "传统舞蹈",
    label: "传统舞蹈",
  },
  {
    value: "传统戏剧",
    label: "传统戏剧",
  },
  {
    value: "传统体育、游艺与杂技",
    label: "传统体育、游艺与杂技",
  },
  {
    value: "传统美术",
    label: "传统美术",
  },
  {
    value: "传统技艺",
    label: "传统技艺",
  },
  {
    value: "传统医药",
    label: "传统医药",
  },
];
const timeOption = [
  {
    value: "2006",
    label: "2006",
  },
  {
    value: "2008",
    label: "2008",
  },
  {
    value: "2011",
    label: "2011",
  },
  {
    value: "2014",
    label: "2014",
  },
  {
    value: "2021",
    label: "2021",
  },
];
let keyWord = ref("");
const total = ref(0);
let introduction = {
  pageSize: 10,
};
let tableData = ref([]);
let culturalHeritage = {};
onBeforeMount(() => {
  getCultural(1, culturalHeritage);
});
const getCultural = (val, obj) => {
  request
    .post(
      `/culturalHeritage/getPart?pageNum=${val}&pageSize=${introduction.pageSize}`,
      obj
    )
    .then((res) => {
      res.code == 0
        ? ((tableData.value = res.data.culturalHeritageList),
          (total.value = res.data.total))
        : ElMessage.error(res.msg);
    });
};

// 样式的回调函数
const rowState = (arg) => {
  return {
    height: "60px",
  };
};
const titleStyle = () => {
  return {
    fontSize: "20px",
    color: "#000",
  };
};

const handleCurrentChange = (val) => {
  getCultural(val);
  console.log(`current page: ${val}`);
};
let itemId = {};
let heritageItem = {};
const toHeritageDetail = (row) => {
  heritageItem = encodeURIComponent(JSON.stringify(row));
  router.push({
    name: "HeritageDetail",
    params: {
      itemId: row.culId,
    },
  });
  router.beforeEach((to, from, next) => {
    localStorage.setItem("itemDetail", heritageItem);
    next();
  });
};
/* const selectData = () => {
  console.log(region.value, sort.value, time.value);
}; */
const confirmSelect = () => {
  console.log(keyWord.value);
  culturalHeritage.city = city.value;
  culturalHeritage.sort = sort.value;
  culturalHeritage.releaseTime = time.value;
  culturalHeritage.detail = keyWord.value;
  console.log(culturalHeritage);
  getCultural(1, culturalHeritage);
};
</script>

<template>
  <div class="box">
    <div class="selectBox">
      <el-select
        v-model="city"
        class="m-2"
        placeholder="所属地区"
        size="large"
        :clearable="true"
      >
        <el-option
          v-for="item in regionOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="sort" class="m-2" placeholder="类别" size="large" :clearable="true">
        <el-option
          v-for="item in sortOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="time" class="m-2" placeholder="公布时间" size="large" :clearable="true">
        <el-option
          v-for="item in timeOption"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model="keyWord"
        placeholder="关键字"
        style="width: 227px; height: 40px"
      />
      <el-button style="width: 100px; height: 40px" @click="confirmSelect">搜索</el-button>
    </div>
    <div class="contentBox">
      <p style="display:flex">搜索结果：共搜索到<p style="color:#972a2a">{{ total }}</p> 个项目</p>
      <div class="itemBox">
        <el-table
          :data="tableData"
          style="width: 100%"
          :row-style="rowState"
          :header-cell-style="titleStyle"
          @row-click="toHeritageDetail"
        >
          <el-table-column prop="culId" label="编号" />
          <el-table-column prop="name" label="名称"  />
          <el-table-column prop="sort" label="类别" />
          <el-table-column prop="releaseTime" label="时间" />
          <el-table-column prop="city" label="地区" width="180" />
        </el-table>
      </div>
    </div>
    <div class="pageNav">
      <el-pagination
        layout="prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
        hide-on-single-page
      />
    </div>
  </div>
</template>

<style lang="less" scoped>
.layout {
  display: flex;
  justify-content: space-around;
}
.box {
  width: 70%;
  margin: 50px auto;
}
.selectBox {
  display: flex;
  margin: 50px auto;
  justify-content: space-between;
}
.contentBox {
  font-weight: 500;
  font-size: larger;
}
.title {
  background-color: antiquewhite;
  margin-top: 20px;
  height: 50px;
  line-height: 50px;
  .layout();
}
.itemBox {
  margin-top: 30px;
}
:deep(.el-table tbody tr:hover > td) {
  background-color: transparent !important;
  cursor: pointer;
  color: #972a2a;
}
.pageNav {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>